<template>
    <div>
      <div style="padding-top:20px" v-if="MuchShow==false">
        <div style="display:flex;margin-bottom:20px">
          <div style="width:310px;margin-left: 50px">
            <span class="account_item_title_app">法人姓名：</span>
            <span>{{shopgetinfo.attach.principalPerson}}</span>
          </div>
          <div style="width:310px;margin-left:50px">
            <span class="account_item_title_app">企业法人证件号：</span>
            <span>{{shopgetinfo.attach.principalCertNo}}</span>
          </div>
        </div>
        <div style="display:flex;margin-bottom:20px;">
          <div style="display: flex;margin-left:50px;width: 310px">
            <span class="account_item_title" style="width: auto;">统一社会信用代码：</span>
            <span style="width:auto">{{shopgetinfo.attach.orgCode}}</span>
          </div>
          <div style="display: flex;margin-left:50px;width: 310px">
            <span class="account_item_title" style="width: auto;">印业执照有效期：</span>
            <span style="width:auto">{{shopgetinfo.attach.busLicenseExpire | formatDate}}</span>
          </div>
        </div>

        <div style="display:flex;margin-bottom:20px">
          <el-form-item label="商户类型">
            <el-select style="width: 235px;" disabled v-model="shopgetinfo.attach.merchantType" placeholder="商户类型">
              <el-option label="自然人、小微" value="01"></el-option>
              <el-option label="个体工商户" value="02"></el-option>
              <el-option label="企业商户" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营类目">
            <el-select @change="inputClick" style="width: 235px;" disabled v-model="shopgetinfo.attach.mcc" placeholder="请选择企业类型">
              <el-option label="其他" value="0"></el-option>
              <el-option label="美食" value="2015050700000000"></el-option>
              <el-option label="超市便利店" value="2015091000052157"></el-option>
              <el-option label="休闲娱乐" value="2015062600004525"></el-option>
              <el-option label="购物" value="2015062600002758"></el-option>
              <el-option label="爱车" value="2016062900190124"></el-option>
              <el-option label="生活服务" value="2015063000020189"></el-option>
              <el-option label="教育培训" value="2016042200000148"></el-option>
              <el-option label="医疗健康" value="2016062900190296"></el-option>
              <el-option label="航旅" value="2015080600000001"></el-option>
              <el-option label="专业销售/批发" value="2016062900190337"></el-option>
              <el-option label="政府/社会组织" value="2016062900190371"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">营业执照</span>
            <div class="shop_img">
              <el-image ref="preview" :preview-src-list="srcList" :src="shopgetinfo.attach.license" style="width:140px;height:140px" v-if="shopgetinfo.attach.license"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.license">暂无执照</span>
            </div>
          </div>
          <div class="account_item">
            <span class="account_item_title">身份证正面(国徽)</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardFront" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardFront"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardFront">暂无证件照</span>
            </div>
          </div>

        </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">身份证反面</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.idCardBack" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.idCardBack"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.idCardBack">暂无证件照</span>
            </div>
          </div>
          <div class="account_item">
            <span class="account_item_title">店面门头照</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.thedoor" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.thedoor"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.thedoor">暂无门头照</span>
            </div>
          </div>
        </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">银行卡/开户证明</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.bankinfoPhoto" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.bankinfoPhoto"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.bankinfoPhoto">暂无许可证</span>
            </div>
          </div>
          <div class="account_item">
            <span class="account_item_title">收银台照</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.companyInward" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.companyInward"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.companyInward">暂无场景照</span>
            </div>
          </div>

        </div>
        <div class="account_conter_item">
          <div class="account_item">
            <span class="account_item_title">食品经营许可证</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.food" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.food"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.food">暂无许可证</span>
            </div>
          </div>
          <div class="account_item">
            <span class="account_item_title">店内场景照</span>
            <div class="shop_img">
              <el-image :preview-src-list="srcList" :src="shopgetinfo.attach.scene" style="width:140px;height:140px" alt="" v-if="shopgetinfo.attach.scene"></el-image>
              <span class="shop_img_notitle" v-if="!shopgetinfo.attach.scene">暂无场景照</span>
            </div>
          </div>

        </div>
      </div>
      <el-form v-if="MuchShow==true" label-width="230px">
        <div style="display:flex">
          <el-form-item label="企业类型">
            <el-select @change="forceRefresh" style="width: 235px;" v-model="shopgetinfo.attach.merchantType" placeholder="请选择企业类型">
              <el-option label="自然人、小微" value="01"></el-option>
              <el-option label="个体工商户" value="02"></el-option>
              <el-option label="企业商户" value="03"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="经营类目">
            <el-select @change="forceRefresh" style="width: 235px;" v-model="shopgetinfo.attach.mcc" placeholder="请选择企业类型">
              <el-option label="其他" value="0"></el-option>
              <el-option label="美食" value="2015050700000000"></el-option>
              <el-option label="超市便利店" value="2015091000052157"></el-option>
              <el-option label="休闲娱乐" value="2015062600004525"></el-option>
              <el-option label="购物" value="2015062600002758"></el-option>
              <el-option label="爱车" value="2016062900190124"></el-option>
              <el-option label="生活服务" value="2015063000020189"></el-option>
              <el-option label="教育培训" value="2016042200000148"></el-option>
              <el-option label="医疗健康" value="2016062900190296"></el-option>
              <el-option label="航旅" value="2015080600000001"></el-option>
              <el-option label="专业销售/批发" value="2016062900190337"></el-option>
              <el-option label="政府/社会组织" value="2016062900190371"></el-option>
            </el-select>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="法人信息">
            <el-col :span="12">
              <el-input @input="inputClick" v-model="shopgetinfo.attach.principalPerson" style="width:235px" />
            </el-col>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-col :span="12">
              <el-input @input="inputClick" v-model="shopgetinfo.attach.principalCertNo" style="width:235px" />
            </el-col>
          </el-form-item>
        </div>

        <div style="display:flex">
          <el-form-item label="电子邮箱" prop="mailbox">
            <el-col :span="12">
              <el-input v-model="shopgetinfo.mailbox" style="width:235px" />
            </el-col>
          </el-form-item>
          <el-form-item label="统一社会信用代码">
            <el-col :span="12">
              <el-input @input="inputClick" v-model="shopgetinfo.attach.orgCode" style="width:235px" placeholder="个体工商户、企业商户必填" />
            </el-col>
          </el-form-item>
        </div>
        <div style="display:flex">
          <el-form-item label="印业执照有效期">
            <el-col :span="12">
              <el-date-picker style="width:235px"  format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd" v-model="shopgetinfo.attach.busLicenseExpire" type="date" placeholder="选择日期">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </div>
        <el-form-item label="营业执照">
          <single-upload v-model="shopgetinfo.attach.license" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="身份证正面(国徽)">
          <single-upload v-model="shopgetinfo.attach.idCardFront" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="身份证反面">
          <single-upload v-model="shopgetinfo.attach.idCardBack" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="店面门头照">
          <single-upload v-model="shopgetinfo.attach.thedoor" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="食品经营许可证">
          <single-upload v-model="shopgetinfo.attach.food" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="店内场景照">
          <single-upload v-model="shopgetinfo.attach.scene" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="银行卡/开户证明">
          <single-upload v-model="shopgetinfo.attach.bankinfoPhoto" style="display: inline-block;" />
        </el-form-item>
        <el-form-item label="收银台照">
          <single-upload v-model="shopgetinfo.attach.companyInward" style="display: inline-block;" />
        </el-form-item>
      </el-form>
    </div>

</template>
<script>
import { updateMchShop } from "@/api/sysSetUp";
import singleUpload from "./singleUpload";
import permission from "@/directive/permission/index.js"; // 权限判断指令
import utils from "@/utils/utils";
export default {
    components: { singleUpload },
    directives: { permission },
    filters: {
    formatDate: function(value) {
      if(value !=  null){
        let substring = value.substring(0,10);
        return substring;
      }else {
        return value;
      }

    },
  },

    props: {
        shopgetinfo: {
            type: Object,
        },
        MuchShow: {
            type: Boolean,
        },
        mailbox: {
            type: Boolean,
        },
    },
    data() {
        return {
            loading: false,
            srcList: [],
        };
    },
    created() {
        if (utils.isNull(this.shopgetinfo.attach.mcc)) {
            this.shopgetinfo.attach.mcc = "0";
        }
    },
    watch: {
        shopgetinfo: {
            handler(val, old) {
                if (val == null) {
                    val.attach == "";
                }
                if (val.attach) {
                    if (typeof val.attach == "string") {
                        val.attach = JSON.parse(val.attach);
                        if (utils.isNull(val.attach.mcc)) {
                            val.attach.mcc = "0";
                        }
                    }
                } else {
                    val.attach = {
                        license: "",
                        idCardFront: "",
                        idCardBack: "",
                        thedoor: "",
                        food: "",
                        scene: "",
                        mcc: "0",
                    };
                }
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        forceRefresh() {
            this.$forceUpdate();
        },
        submit() {
            var _this = this;
            this.loading = true;

            updateMchShop(this.shopgetinfo)
                .then((res) => {
                    console.log(res);
                    this.loading = false;
                    this.$message.success("修改成功");
                    _this.$store
                        .dispatch("tagsView/delView", _this.$route)
                        .then(({ visitedViews }) => {
                            _this.$router.push({
                                path: "/sysMch/list",
                            });
                        });
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        inputClick() {
            this.$forceUpdate();
        },
    },
};
</script>

<style scoped>
.account_item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-bottom: 30px;
    margin-left: 50px;
}

.account_item_title {
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    width: 160px;
    display: block;
}
.account_item_title_app {
    font-size: 14px;
    color: #606266;
    font-weight: 700;
    width: 140px;
}
.shop_img {
    width: 140px;
    height: 140px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    margin-left: 5px;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.shop_img_notitle {
    font-size: 14px;
    color: #c0c4cc;
}
.account_conter_item {
    display: flex;
}
</style>
